<template>
    <div class="inbound-detail-page">
        <!-- 页面标题和返回 -->
        <div class="page-header">
            <div class="header-left">
                <el-page-header @back="router.back()" content="出库详情" />
            </div>
            <div class="header-actions">
                <el-button @click="handlePrint">🖨️ 打印</el-button>
                <el-button type="primary" @click="handleExport"><el-icon>
                        <Download />
                    </el-icon>导出</el-button>
            </div>
        </div>

        <!-- 基本信息卡片 -->
        <el-card class="detail-card" v-loading="loading">
            <template #header>
                <div class="card-header">
                    <span class="card-title">基本信息</span>
                    <span class="inbound-number">出库单号：{{ detailData.outboundNumber }}</span>
                </div>
            </template>

            <el-descriptions :column="2" border>
                <el-descriptions-item label="疫苗名称">
                    {{ detailData.vaccineName || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="批次号">
                    {{ detailData.batchNumber || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="生产厂家">
                    {{ detailData.manufacturer || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="规格">
                    {{ detailData.specification || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="出库数量">
                    <span class="quantity">{{ detailData.quantity || 0 }} 支</span>
                </el-descriptions-item>
                <el-descriptions-item label="用途">
                    {{ detailData.purpose || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="接种人">
                    {{ detailData.recipientName || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="身份证号">
                    {{ detailData.recipientIdcard || '暂无' }}
                </el-descriptions-item>
                <el-descriptions-item label="出库时间">
                    {{ detailData.outboundTime }}
                </el-descriptions-item>
                <el-descriptions-item label="操作员">
                    {{ detailData.operator || '-' }}
                </el-descriptions-item>
                <el-descriptions-item label="备注" :span="2">
                    {{ detailData.remark || '无' }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import axios from 'axios'
const route = useRoute()
const router = useRouter()

const loading = ref(false)
const detailData = ref({})
const Id = route.query.id
// 加载详情数据
const loadDetail = async () => {
    loading.value = true
    try {
        await axios.get('http://127.0.0.1:8081/vaccine/outbound/one', {
            headers: {
                'X-Admin-Token': sessionStorage.getItem("token")
            },
            params: {
                id: Id
            }
        }).then((req) => {
            console.log(req);
            detailData.value=req.data.data
        })
    } catch (error) {
        ElMessage.error('获取入库单详情失败')
        console.error('加载详情错误:', error)
    } finally {
        loading.value = false
    }
}

// 打印功能
const handlePrint = () => {
    window.print()
}

// 导出功能
const handleExport = () => {
    ElMessage.success('导出功能开发中')
}
// 初始化加载
onMounted(() => {
    loadDetail()
})
</script>

<style scoped>
.inbound-detail-page {
    padding: 20px;
    background: #fff;
    border-radius: 8px;
}

.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid #eee;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.back-btn {
    border: none;
    background: #f5f7fa;
}

.header-left h2 {
    margin: 0;
    color: #303133;
}

.detail-card {
    margin-bottom: 20px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.card-title {
    font-size: 16px;
    font-weight: bold;
    color: #303133;
}

.inbound-number {
    color: #409eff;
    font-weight: bold;
}

.quantity {
    color: #409eff;
    font-weight: bold;
}

.action-card {
    margin-top: 20px;
}

:deep(.el-descriptions__label) {
    font-weight: bold;
    width: 100px;
}

:deep(.el-descriptions__content) {
    color: #606266;
}
</style>